<template>
  <el-container class="layout-container-demo">
    <el-aside width="200px" style="background-color: rgb(238, 241, 246)">
      <el-scrollbar>
        <el-menu
          background-color="#001529"
          active-text-color="#fff"
          text-color="grey"
          class="el-menu-vertical-demo"
          :default-active="$router.currentRoute.value.fullPath"
          :collapse="isCollapse"
          router
        >
          <el-menu-item index="/dashboard">
            <el-icon>
              <home-filled />
            </el-icon>
            <span class="menu_text">首页</span>
          </el-menu-item>
          <el-menu-item index="/table">
            <el-icon>
              <list />
            </el-icon>
            <span class="menu_text">表格</span>
          </el-menu-item>
          <el-menu-item index="/atest">
            <el-icon>
              <eleme />
            </el-icon>
            <span class="menu_text">component测试</span>
          </el-menu-item>
        </el-menu>
      </el-scrollbar>
    </el-aside>

    <el-container>
      <el-header style="text-align: right; font-size: 12px">
        <div class="toggle_menu_collapse" @click="isCollapse = !isCollapse">
          <el-icon>
            <expand v-if="isCollapse" />
            <fold v-else />
          </el-icon>
        </div>
        <div class="right">
          <el-avatar :size="'small'" :src="userInfoStore.userInfo.avatarSrc" class="avatar"></el-avatar>
          <p class="say_hello">你好，{{ userInfoStore.userInfo.realName }}</p>
        </div>
      </el-header>

      <el-main>
        <el-scrollbar style="height: 100%">
          <router-view v-slot="{ Component }">
            <transition
              appear
              mode="out-in"
              enter-active-class="animate__animated animate__fadeInLeft"
              leave-active-class="animate__animated animate__fadeOutRight"
            >
              <keep-alive :include="keepAliveList.join(',')">
                <component :is="Component" />
              </keep-alive>
            </transition>
          </router-view>
        </el-scrollbar>
      </el-main>

      <el-footer>good good study, day day up</el-footer>
    </el-container>
  </el-container>
</template>

<script lang="ts" setup>
import { ref } from "vue";
import { useRouter } from "vue-router";
import useUserInfoStore from "@/store/userInfo";
import { get_userInfo } from '@/api/panel'
import { Fold, Expand, HomeFilled, List, Eleme, Grape } from "@element-plus/icons-vue";
import { keepAliveList } from '@/utils/constant.ts'

let isCollapse = ref(false);
let $router = useRouter();
// 获取用户信息并更新到piniaStore
let userInfoStore = useUserInfoStore();
get_userInfo().then((res: any) => {
  if (!res.success) return
  let { realName, avatarSrc } = res.userInfo
  userInfoStore.$patch((state) => {
    realName && (state.userInfo.realName = realName)
    avatarSrc && (state.userInfo.avatarSrc = avatarSrc)
  })
})
</script>

<style scoped lang="scss">
.el-container {
  height: 100vh;
  .toggle_menu_collapse {
    cursor: pointer;
    font-size: 22px;
  }
  .right {
    display: flex;
    align-items: center;
    .say_hello {
      font-size: 14px;
    }
    .avatar {
      margin-right: 10px;
    }
  }
  .menu_text {
    width: 140px;
  }
  &::v-deep .el-scrollbar__view {
    height: 100%;
  }
}
.layout-container-demo {
  .el-header {
    position: relative;
    background-color: #fff;
    box-shadow: 0 0 4px rgba(0, 0, 0, 0.2);
    color: var(--el-text-color-primary);
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  .el-aside {
    width: auto;
    color: var(--el-text-color-primary);
    background: #001529 !important;
    border-right: solid 1px #e6e6e6;
    box-sizing: border-box;
  }
  .el-menu {
    border-right: none;
  }
  .el-main {
    padding: 16px 16px 0px 16px;
    background-color: rgba(236, 240, 245, 1);
  }
  .el-footer {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 30px;
    color: rgba(0, 0, 0, 0.45);
    font-size: 14px;
    background-color: rgba(236, 240, 245, 1);
  }
  .toolbar {
    position: absolute;
    display: inline-flex;
    align-items: center;
    top: 50%;
    right: 20px;
    transform: translateY(-50%);
  }
}
</style>
